<template>
  <div class style="height: 100%;padding: 20px;">
    <div :id="uniqueID" style="height: 100%;width: 100%;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import uuidv1 from "uuid/v1";

import defaultmixins from "@/mixins/bigScreen/defaultmixins";

export default {
  components: {
  },
  name: "chartbarchartzhongyaozzn",
  mixins: [defaultmixins],
  components: {},
  data() {
    return {
      uniqueID: "",
      myChart: "",
      options: ""
    };
  },
  computed: {},
  watch: {
    "$store.state.daping.queryDbMeasuredpoint": {
      handler: function(n, o) {
        this.loadData(n);
      }
    }
  },
  created() {
    this.uniqueID = uuidv1();
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID));
    //供热面积环状图

    var scale = this.$root.setting.scale;

    var color = "#F5F5F5";
    var option = {
      // title: {
      //   text: "重要监测点(MPa)",
      //   // show: false,
      //   textStyle: {
      //     color: "#fff",
      //     fontSize: 36 * scale,
      //     fontWeight: "bold"
      //   }
      // },
      // backgroundColor: '#0E2A43',
      tooltip: {
        show: true,
        trigger: "axis",
        textStyle: {
          fontWeight: "normal",
          fontSize: 30 * scale
        },
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      legend: {
        data: ["供水压力", "回水压力"],
        icon: "rect",
        itemWidth: 26 * scale, // 图例图形宽度
        itemHeight: 20 * scale, // 图例图形高度
        top: "-1%",
        right: "5%",
        textStyle: {
          color: color,
          fontSize: 28 * scale,
          padding: [15, 0, 0, 0]
        }
      },
      grid: {
        left: "5%",
        right: "5%",
        bottom: "0%",
        top: "20%",
        containLabel: true
      },
      // dataset:{
      // },
      xAxis: [
        {
          type: "category",
          // data: nameData,
          // data: ["三磨", "石头山", "托斯卡纳二期", "正商华钻滨院3号"],
          axisLabel: {
            padding: [15, 0, 0, 0],
            interval: 0,
            textStyle: {
              color: color,
              fontSize: 30 * scale
            }
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          // max:600,
          axisLabel: {
            // inside: true,
            padding: [0, 15, 0, 0],
            textStyle: {
              color: color,
              fontSize: 30 * scale
            }
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.12)"
            },
            show: true
          }
        }
      ],
      series: [
        {
          name: "供水压力",
          type: "bar",
          stack: "供水压力",
          barWidth: "20%",
          barGap: "80%",
          // barCategoryGap:'100%',
          label: {
            normal: {
              show: true,
              position: "top",
              distance: 10 * scale,
              formatter: function(params) {
                return params.data.value;
              },
              textStyle: {
                // color: "#86C9F4",
                color: "#ffffff",
                fontSize: 28 * scale
              }
            }
          },
          itemStyle: {
            normal: {
              color: "#1170E4",
              fontSize: 30 * scale
            }
          },
          data: []
        },
        {
          name: "回水压力",
          type: "bar",
          stack: "回水压力",
          barWidth: "20%",
          barGap: "80%",
          label: {
            normal: {
              show: true,
              position: "top",
              distance: 10 * scale,
              formatter: function(params) {
                return params.data.value;
              },
              textStyle: {
                // color: "#86C9F4",
                color: "#ffffff",
                fontSize: 28 * scale
              }
            }
          },
          itemStyle: {
            normal: {
              color: "#25eced", //'#00C1FE',
              fontSize: 30 * scale
            }
          },
          data: []
        }
      ]
    };

    myChart.setOption(option);
    window.addEventListener("resize", () => {
      myChart.resize();
    });
    this.myChart = myChart;
    this.options = option;
  },
  methods: {
    loadData(n) {
      this.options.series[0].data = n.gongData;
      this.options.series[1].data = n.huiData;
      this.myChart.setOption(this.options);
    }
  }
};
</script>
<style lang='scss' scoped>
</style>